<!doctype html>
<html lang="en">
<head>
  <title>WebGL Demo</title>
  <meta charset="utf-8">
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body>
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>

<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script id="vertex-shader-2d" type="notjs">
  attribute vec4 a_position;

  void main() {
     gl_Position = a_position;
     gl_PointSize = 20.0;
  }


</script>

<script id="fragment-shader-2d" type="notjs">
  precision mediump float;

  void main() {
    gl_FragColor = vec4(1, 0, 0.5, 1);
  }


</script>

<script>
  main();

  function main() {
    const canvas = document.querySelector('#glcanvas');

    const gl = canvas.getContext('webgl');

    if (!gl) {
      alert('不支持该浏览器！');
      return;
    }

    //并称为
    var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    //找到刚刚创建的程序属性位置
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");


    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    //转换gl_Positon返回像素，称为屏幕空间。可用把gl.viewport把画布的当前大小传递给它
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    //把画布清理干净
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    //告诉webgl要执行那个着色器程序
    gl.useProgram(program);



    gl.vertexAttrib3f(positionAttributeLocation,0.0,0.0,0.0)

    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 1;
    gl.drawArrays(gl.POINTS, offset, count);
    //96
  }
</script>
</html>
